{extend name="public/base" /}
{block name="css"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.css" /}
<style>
  .maxWidth {
    max-width: 1000px;
    margin: 0 auto;
  }
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .swiper-container .swiper-button-prev::after {
    content: '';
  }
  .swiper-container .swiper-button-next::after {
    content: '';
  }
  .swiper-container .swiper-button-prev{
    background-image: url('https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/esthetics/mobile/left.png') ;
    left: 15px;
    right: auto;
    width: 30px;
    height: 30px;
    background-size: cover;
  }
  .swiper-container .swiper-button-next{
    background: url('https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/esthetics/mobile/right.png');
    right: 15px;
    width: 30px;
    height: 30px;
    left: auto;
    background-size:cover;
  }

  .case-item {
    background: #6D747B;
    padding: 20px 10px;
    margin-top: 20px;
  }

  .case-item-title {
    color: #ffffff;
    text-align: center;
    margin-bottom: 10px;
  }

  .case-item-content {
    position: relative;
  }

  .case-item-content > div:nth-child(1) {
    color: #EAC480;
    text-align: center;
    margin: 10px 0;
    font-size: 15px;
    border-bottom: 1px #ccc solid;
    padding-bottom: 10px;
    width: 100%;
  }

  .case-item-content-desc, .case-item-content-desc > div {
    color: #ffffff;
    font-weight: 400;
    font-size: 13px;
  }

  .case-item-content-desc > span{
    font-weight: normal;
    color: #dddddd;
    font-size: 10px;
  }

  .case-item-content > div:last-child {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }

  .case-detail {
    font-size: 12px;
    background: #323334;
    border: 0;
    padding: 5px 15px;
    color: #ffffff;
  }

  .case-appointment {
    margin-left: 15px;
    font-size: 12px;
    background: #A83641;
    border: 0;
    padding: 5px 15px;
    color: #ffffff;
  }
</style>
{/block}
{block name="main"}
<div class="container-fluid">
  <img alt="" class="img-fluid" src="https://res.bestyoujia.com/web/ZMYJ/esthetics/h5/banner.png">

  <div class="d-flex flex-column" style="flex-direction: column; padding: 20px 0; background-image: url('https://res.bestyoujia.com/web/ZMYJ/esthetics/h5/bmk_bg.png');background-size: cover;">
    <h2 style="color: #333; font-size: 18px; text-align: center; font-weight: 400;">全成都已有 <span style="color: #B5A055; font-weight: bold">8000</span> 户家庭选择U家工场</h2>
    <div style="width: 100%; display: flex; flex-direction: column; justify-content: space-between; margin-top: 15px; overflow: hidden">
      <div style="display: flex; justify-content: center; align-items: center;">
        <div style="display: flex; align-items: center; width: 70%">
          <img alt="" style="width: 20px" src="https://res.bestyoujia.com/web/UJGC/index/h5/baojia/chenghu.png"/>
          <input style="margin-left: 8px; padding: 5px 10px; border: 0; background: #FFFFFF; width: 100%" id="i-name" placeholder="请输入您的称呼">
        </div>
      </div>
      <div style="display: flex; justify-content: center; align-items: center; margin-top: 18px">
        <div style="display: flex; align-items: center; width: 70%">
          <img alt="" style="width: 20px" src="https://res.bestyoujia.com/web/UJGC/index/h5/baojia/mianji.png"/>
          <input style="margin-left: 8px; padding: 5px 10px; border: 0; background: #FFFFFF; width: 97%" id="i-area" placeholder="请输入您的房屋面积">
          <span style="font-weight: 400;color: #333333; margin-left: 5px">㎡</span>
        </div>
      </div>
      <div style="display: flex; justify-content: center; align-items: center; margin-top: 18px">
        <div style="display: flex; align-items: center; width: 70%">
          <img alt="" style="width: 20px" src="https://res.bestyoujia.com/web/UJGC/index/h5/baojia/dianhua.png"/>
          <input style="margin-left: 8px; padding: 5px 10px; border: 0; background: #FFFFFF; width: 100%" id="i-mobile" placeholder="请输入您的联系方式">
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: center; align-items: center; margin-top: 18px">
      <div style="display: flex; align-items: center;justify-content: space-between; width: 70%">
        <div style="display: flex; align-items: center">
          <img alt="" style="width: 20px" src="https://res.bestyoujia.com/web/UJGC/index/h5/baojia/jijia.png"/>
          <u id="jump-price" style=" width: 60px; margin-left: 8px; color: #333333; font-weight: bold; font-size: 18px">152435</u>
          <span style="font-size: 14px; margin-left: 8px">元</span>
        </div>
        <button id="i-order" style=" border-radius: 0;  border: 0; margin-left: 20px; font-size: 15px;width: 100%;background: #B5A055;color: white;height: 35px">
          开始计算
        </button>
      </div>
    </div>
  </div>

  <div class="d-flex flex-column p-t-5">
    <img class="mx-auto" style="width: 94%" src="https://res.bestyoujia.com/web/ZMYJ/esthetics/h5/td.png">
  </div>

  <div class="d-flex flex-column p-t-5">
    <img alt="" class="mx-auto" style="width: 100%" src="https://res.bestyoujia.com/web/ZMYJ/esthetics/h5/zd.png">
    <img alt="" class="mx-auto" style="width: 80%; margin-top: 20px" src="https://res.bestyoujia.com/web/ZMYJ/esthetics/h5/zd1.png">
    <img alt="" class="mx-auto" style="width: 80%; margin-top: 20px" src="https://res.bestyoujia.com/web/ZMYJ/esthetics/h5/zd2.png">
    <img alt="" class="mx-auto" style="width: 80%; margin-top: 20px" src="https://res.bestyoujia.com/web/ZMYJ/esthetics/h5/zd3.png">

    <img alt="" class="mx-auto" style="width: 95%; margin-top: 30px" src="https://res.bestyoujia.com/web/ZMYJ/esthetics/h5/design.png">
  </div>

  <div class="d-flex flex-column p-t-5">
    <div style="position: relative;display: flex;flex-direction: column;align-items: center">
      <img class="mx-auto" style="width: 100%" src="https://res.bestyoujia.com/web/ZMYJ/esthetics/h5/zp.png">
      <button onclick="showAppointmentLayer()" style="max-width: 160px;width: 160px;min-height: 40px; background: #fff; border: 0; position: absolute;bottom: 25px;opacity: 1; font-size: 16px; color: #333; padding: 0 8px">获取全屋规划方案 ></button>
    </div>
  </div>

  <div class="m-t-5 d-flex flex-column" style="padding: 0 10px">
    <img class="mx-auto" style="width: 75%;" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/esthetics/mobile/title5.png">
    <img class="mx-auto m-t-5" style="width: 100%" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/esthetics/mobile/a.png">
    <img class="mx-auto" style="width: 100%;margin-top: 10px" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/esthetics/mobile/b.png">
    <img class="mx-auto" style="width: 100%;margin-top: 10px" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/esthetics/mobile/c.png">
    <img class="mx-auto" style="width: 100%;margin-top: 10px" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/esthetics/mobile/d.png">
  </div>

  <div class="d-flex flex-column p-t-5" style="position: relative; align-items: center">
    <img class="mx-auto" style="width: 100%" src="https://res.bestyoujia.com/web/ZMYJ/esthetics/h5/designers.png">
    <button onclick="showAppointmentLayer()" style="max-width: 150px;width: 150px;min-height: 40px;position: absolute;bottom: 80px;opacity: 1; border: 1px solid #FFFFFF; background: transparent; color: #FFFFFF">预约设计服务 ></button>
  </div>

  <div class="d-flex flex-column" style="padding-bottom: 30px;background: #24282B url('https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/esthetics/mobile/eg_bg.png') no-repeat">
    <img class="img-fluid maxWidth mx-auto p-t-5" style="width: 30%;margin: 10px 0" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/esthetics/mobile/title6.png">
    <div class="swiper-container" style="width: 94%; margin-top: 10px">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img class="img-fluid mx-auto" src="https://res.bestyoujia.com/web/ZMYJ/esthetics/h5/eg1.png">
        </div>
        <div class="swiper-slide">
          <img class="img-fluid mx-auto" src="https://res.bestyoujia.com/web/ZMYJ/esthetics/h5/eg2.png">
        </div>
        <div class="swiper-slide">
          <img class="img-fluid mx-auto" src="https://res.bestyoujia.com/web/ZMYJ/esthetics/h5/eg3.png">
        </div>
        <div class="swiper-slide">
          <img class="img-fluid mx-auto" src="https://res.bestyoujia.com/web/ZMYJ/esthetics/h5/eg4.png">
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
    <div style="width:95%;margin: 0 auto">
<!--      <div class="case-item">-->
<!--        <div class="row">-->
<!--          <div class="col-12">-->

<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="case-item">-->
<!--        <div class="case-item-title">中海右岸 | 3室2厅 | 83㎡</div>-->
<!--        <div class="row">-->
<!--          <div class="col-12">-->
<!--            <div class="swiper-container">-->
<!--              <div class="swiper-wrapper">-->
<!--                <div class="swiper-slide">-->
<!--                  <img class="img-fluid mx-auto" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/esthetics/mobile/case2/eg2_1.png">-->
<!--                </div>-->
<!--                <div class="swiper-slide">-->
<!--                  <img class="img-fluid mx-auto" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/esthetics/mobile/case2/eg2_2.png">-->
<!--                </div>-->
<!--                <div class="swiper-slide">-->
<!--                  <img class="img-fluid mx-auto" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/esthetics/mobile/case2/eg2_3.png">-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="swiper-button-next"></div>-->
<!--              <div class="swiper-button-prev"></div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="col-12 case-item-content">-->
<!--            <div>北欧轻奢 —— 美学整配价：7.8万</div>-->
<!--            <div class="row" style="width: 90%;margin: 0 auto">-->
<!--              <div class="col-6 case-item-content-desc">-->
<!--                ⋅成品家具 13件套 3.3万-->
<!--                <br>-->
<!--                <span>含沙发、茶几、电视柜、餐桌、餐椅、床、床头柜、床垫</span>-->
<!--              </div>-->
<!--              <div class="col-6 case-item-content-desc">-->
<!--                <div>⋅全屋定制 27㎡ 2.6万</div>-->
<!--                <div>⋅窗帘 4幅 0.8万</div>-->
<!--                <div>⋅精装改造 1.1万</div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div>-->
<!--              <button class="case-detail" onclick="window.location.href='{$Request.root}/case/64.html'">了解详情></button>-->
<!--              <button class="case-appointment" onclick="showAppointmentLayer()">报名获取方案报价></button>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="case-item">-->
<!--        <div class="case-item-title">世龙广场 | 2室2厅 | 94㎡</div>-->
<!--        <div class="row">-->
<!--          <div class="col-12">-->
<!--            <div class="swiper-container">-->
<!--              <div class="swiper-wrapper">-->
<!--                <div class="swiper-slide">-->
<!--                  <img class="img-fluid mx-auto" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/esthetics/mobile/case3/eg3_1.png">-->
<!--                </div>-->
<!--                <div class="swiper-slide">-->
<!--                  <img class="img-fluid mx-auto" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/esthetics/mobile/case3/eg3_2.png">-->
<!--                </div>-->
<!--                <div class="swiper-slide">-->
<!--                  <img class="img-fluid mx-auto" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/esthetics/mobile/case3/eg3_3.png">-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="swiper-button-next"></div>-->
<!--              <div class="swiper-button-prev"></div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="col-12 case-item-content">-->
<!--            <div>日式混搭 — 美学整配价：3.74万</div>-->
<!--            <div class="row" style="width: 90%;margin: 0 auto">-->
<!--              <div class="col-6 case-item-content-desc">-->
<!--                ⋅成品家具 17件套 3.7万-->
<!--                <br>-->
<!--                <span>含沙发、茶几、电视柜、餐桌、边柜、床、床头柜、书椅、床垫</span>-->
<!--              </div>-->
<!--              <div class="col-6 case-item-content-desc">-->
<!--                <div>⋅灯具 2件 0.04万</div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div>-->
<!--              <button class="case-detail" onclick="window.location.href='{$Request.root}/case/59.html'">了解详情></button>-->
<!--              <button class="case-appointment" onclick="showAppointmentLayer()">报名获取方案报价></button>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>

  <div class="d-flex flex-column">
    <img class="mx-auto" style="width: 100%" src="https://res.bestyoujia.com/web/ZMYJ/esthetics/h5/sl.png">
    <img class="mx-auto" style="width: 100%" src="https://res.bestyoujia.com/web/ZMYJ/esthetics/h5/flow.png">
    <img class="mx-auto" onclick="showAppointmentLayer()" style="width: 100%" src="https://res.bestyoujia.com/web/ZMYJ/esthetics/h5/yy.png">
  </div>

</div>
{/block}
{block name="js"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.js" /}
<script>
    $('#nav').find('ul > li').eq(1).addClass('nav-active');
    $("#nav").scrollLeft(65*1);

    initWxShare('致美优家-成都精装房拎包住，就选致美优家，一站配齐，高效入住', '致美优家，提供精装房从交房到入住的一站式整配服务，涵盖成品/定制家具，窗帘软饰，床垫，精装改造全程管家式服务，打造一站式入住的全新体验。');

    var priceList = [ 152364, 208664, 127564, 183764, 148726, 242864, 193764, 263134, 282973 ];
    setInterval(function () {
      $('#jump-price').text(priceList[Math.floor(Math.random()*priceList.length)]);
    }, 500);

    const swiper = new Swiper('.swiper-container', {
        autoplay: {
            delay: 3000,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    $('.detail').on('click', function () {
        layer.msg('该功能暂未开放', {icon: 6,time: 1000});
    });

    $('.appointment').on('click', function () {
        showAppointmentDialog();
    });

    $('#i-order').on('click', function () {
      const mobile = $('#i-mobile').val();
      const mobileStatus = validMobile(mobile);
      switch (mobileStatus) {
        case 1:
          $.showLoading("预约中");

          const data = { mobile, customer: $('#i-name').val(), area: $('#i-area').val() };

          doAppointment(data,
            function(res) {
              $.hideLoading();
              $.toast("预约成功");
              $('#i-name').val('');
              $('#i-mobile').val('');
              $('#i-area').val('');
              console.log('onAppointmentSuccess', res);
              const { data = '' } = res;
              if(data) {
                buryingPoint('APPOINTMENT', data);
              }
            }, function(err) {
              console.log('onAppointmentError', err);
              $.hideLoading();
              $.toast(err, "text");
            });

          break;
        case 2:
          $.toast("手机号码格式不正确", "forbidden");
          break;
        case 3:
          $.toast("请输入手机号码", "forbidden");
          break;
      }
    });
</script>
{/block}